<template>
  <div id="bg">
    <div class="box">
      <div id="head">
        <label id="login">Forget</label>
        <div class="interval">· </div>
        <h2>Password</h2>
      </div>
      <form>
        <div class="inputbox" id="email">
          <input autocomplete="off" v-model="email" type="test" name=" " required="" />
          <label for="email">Email / 邮箱</label>
          <button class="send" v-if="showbtn" type="button" @click="sendEmail">
            发送验证码
          </button>
          <button class="send red" v-if="!showbtn" type="button">
            {{ sec }}
          </button>
        </div>
        <div class="inputbox">
          <input autocomplete="off"
            v-model="checkemail"
            type="text"
            name="checkemail"
            required=""
          />
          <label for="checkemail">Verify Code / 邮箱验证码</label>
        </div>
        <div class="inputbox">
          <input autocomplete="off"
            v-model="password"
            type="password"
            name="password"
            required=""
          />
          <label for="password">New Password / 新密码</label>
        </div>
        <div class="inputbox">
          <input autocomplete="off"
            v-model="password_1"
            type="password"
            name="password_1 "
            required=""
          />
          <label for="password_1">Confirm password / 确认密码</label>
        </div>

        <!-- <button type="submit" name="" value="Register now"> -->
        <input type="button" name="" value="Comfirm" @click="updatePwd" />
      </form>
      <div v-show="tipMessage.length > 0" style="color: red">
        <p class="tip">{{ tipMessage }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    return {
      password: '',
      email: '',
      code: '',
      password_1: '',
      checkemail: '',
      tipMessage: '',
      showbtn: true,
      sec: '',
    };
  },
  methods: {
    async updatePwd() {
      this.tipMessage = '';
      if (this.checkemail != this.code) {
        this.$message({
          message: '邮箱验证码错误！',
          type: 'error',
          offset: 70,
        });
        return;
      }
      if (this.validate) {
        try {
          const res = await this.$axios.post(`http://work.caike.online/user`, {
            action: 'updatePwd',
            email: this.email,
            password: this.password,
          });
          console.log(res);
          const info = res.data;
          if (info.status === 1) {
            this.$message({
              message: '重置密码成功',
              type: 'success',
              offset: 70,
            });
            // window.location.href = '/login';
          } else if (info.status === 0) {
            this.$message({
              message: '更改失败！',
              type: 'error',
              offset: 70,
            });
            console.log('出现错误，发送失败！');
          } else if (info.status === -1) {
            this.$message({
              message: '更改错误',
              type: 'error',
              offset: 70,
            });
          }
        } catch (err) {
          this.$message({
            message: '请求发送失败',
            type: 'error',
            offset: 70,
          });
          console.log(err);
        }
      }
    },
    async sendEmail() {
      try {
        const res = await this.$axios.post(`http://work.caike.online/user`, {
          action: 'email',
          email: this.email,
        });
        console.log(res);
        const info = res.data;
        if (info.num != null) {
          this.code = info.num;
          this.showbtn = false;
          //时间间隔
          this.sec = 300;
          setInterval(() => {
            this.sec = this.sec - 1;
            if (this.sec == 0) {
              this.showbtn = true;
            }
          }, 1000);
        } else {
          this.$message({
            message: '验证码发送失败',
            type: 'error',
            offset: 70,
          });
        }
      } catch (err) {
        this.$message({
          message: '发送失败,请刷新页面重试！',
          type: 'error',
          offset: 70,
        });
        console.log(err);
      }
    },
    validate() {
      // 表单验证
      if (this.email.length === 0) {
        this.tipMessage = '还没有填写邮箱！';
        return false;
      } else if (this.password.length === 0) {
        this.tipMessage = '还没有填写密码！';
        return false;
      } else if (this.password.length < 8) {
        this.tipMessage = '密码长度不得小于8位';
        return false;
      } else if (this.password_1.length === 0) {
        this.tipMessage = '还没有填写确认密码！';
        return false;
      } else if (this.checkemail.length === 0) {
        this.tipMessage = '还没有填写邮箱验证码！';
        res = false;
      } else if (this.password !== this.password_1) {
        this.tipMessage = '两次密码输入不一致！';
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped>
body {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  /*设置字体为sans-serif*/
  background-size: cover;
  /*背景图片尺寸为覆盖cover*/
  background-image: url('../assets/img/login-pic.jpg');
}

#bg {
  width: 100%;
  height: 100%;
  background-image: url('../assets/img/login-pic.jpg');
  position: fixed;
  top: 0;
  left: 0;
  /* z-index: -10; */

  background-position: center 0;
  /* background-repeat: no-repeat; */
  /* background-attachment: fixed;
  background-size: cover; */
  /* -webkit-background-size: cover;
  -o-background-size: cover; */
  zoom: 1;
  opacity: 1;
}

.box {
  position: absolute;
  /*定位方式绝对定位absolute*/
  margin-top: 20px;
  top: 50%;
  left: 50%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform: translate(-50%, -50%);
  /*实现块元素百分比下居中*/
  width: 450px;
  padding: 50px;
  padding-top: 20px;
  background: rgba(0, 0, 0, 0.3);
  /*背景颜色为黑色，透明度为0.8*/
  box-sizing: border-box;
  /*box-sizing设置盒子模型的解析模式为怪异盒模型*/
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  border-radius: 15px;
  /*边框圆角，四个角均为15px*/
}

.box h2 {
  padding-bottom: 25px;
  margin: 0 0 5px;
  padding: 0;
  color: #fff;
  text-align: center;
  /*文字居中*/
}
.box a {
  text-decoration: none;
  transition: 0.5s;
}

#login:hover {
  /* color: rgba(3, 149, 244); */
  color: #03a9f4;
  /* font-size:30px; */
  text-decoration: underline;
  cursor: pointer;
}
#head {
  display: flex;
  width: 200px;
  margin: 0 auto;
  margin-bottom: 20px;
  justify-content: space-between;
}
.interval {
  font-size: 18px;

  color: white;
  display: inline-block;

  margin-left: 5px;
}
.box .inputbox {
  position: relative;
}
.box .inputbox input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
  /*字符间的间距1px*/
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  /*outline用于绘制元素周围的线*/
  background: transparent;
  /*背景颜色为透明*/
}
.box .inputbox label {
  /*<label> 标签为 input 元素定义标注（标记）*/
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  /*鼠标事件消失，比如说选中文字，光标定位，超链接下划线*/
  transition: 0.5s;
  /*过渡时间5s*/
}
.box .inputbox input:focus ~ label,
.box .inputbox input:valid ~ label {
  top: -18px;
  left: 0;
  color: #03a9f4;
  font-size: 14px;
}
/* .box input[type="submit"] */
input[type='button'] {
  /* background: transparent; */
  /* background: rgba(0,191,255,.6); */
  border: none;
  outline: none;
  font-size: 16px;
  color: #fff;
  background: #03a9f4;
  /* opacity:0.9; */
  padding: 15px 20px;
  /* test-align: center; */
  cursor: pointer;
  /*光标呈现为指示链接的指针（一只手）*/
  border-radius: 10px;
}
#login {
  font-size: 25px;
  color: white;
  font-weight: bold;
}
.send {
  height: 35px;
  width: 125px;
  margin: 5px;
  margin-right: 0px;
  border: none;
  outline: none;
  font-size: 8px;
  color: #fff;
  background: #0e67db73;
  padding: 10px 10px;
  /* test-align: center; */
  cursor: pointer;
  /*光标呈现为指示链接的指针（一只手）*/
  border-radius: 10px;
}
.red {
  cursor: none;
  background-color: rgba(255, 0, 0, 0.514);
}

#email {
  display: flex;
  flex-direction: row;
}
</style>
